<template>
    <div class="loan-in-want-use">
        <div class="wrapper">
            
            <ul class="form-box">
                <li class="form__item select" v-if='usageList.length'>
                    <span class="form__key">借款用途</span>
                    <div class="form__value">
                        <picker-list picker-id='usage' :list='usageList' v-model='usage'></picker-list>
                    </div>
                </li>
            </ul>

            <!-- <ul class="form-box">
                <li class="form__item">
                    <div class="form__value">
                        <textarea rows="3" placeholder="补充说明" v-model='intro' @input='introSubString'></textarea>
                    </div>
                </li>
            </ul>

            <p class='intro-length' :class='{"shake animated" : introLength >= 40}'>{{introLength}}/40</p> -->

            <div class="upload">
                <p class="upload__title">图片附件</p>
                <div class="upload__img">
                    <div class="upload__img-list">
                        <div class="upload__img-item" v-for='(item,index) in imgList' @click='showImg(item,index)'>
                            <img :src="item.src" alt="">
                            <loading mask v-show='item.loading' mode='full' :size='14'></loading>
                        </div>
                    </div>
                    <upload @done='uploadImg'>
                        <span class="upload__img-add"></span>
                    </upload>
                </div>
                <p class='intro-length' >{{imgList.length}}/6</p>
            </div>
            
            <div class="save-use">
                <div class="button long" @click='saveUse'>保存</div>
            </div>

        </div>

        <image-view :url='currentImg' :show='modal_img_show' @close='modal_img_show = false' deleteButton @delete='deleteImg'></image-view>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import loading from '../components/Loading.vue'
    import pickerList from '../components/PickerList.vue'
    import upload from '../components/Upload.vue'
    import modal from '../components/Modal.vue'
    import imageView from '../components/ImageView.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { loanInApi, storageApi } from '../api/api'
    import moment from 'moment'
    import { getBrowser } from '../utils/utils'

    export default {
        components:{
            loading,
            pickerList,
            upload,
            modal,
            imageView
        },
        data() {
            return {
                inWechat:getBrowser() == 'WeChat',
                usageList:[],
                imgList:[],
                loadingList:[],
                uploadList:[],
                usage:-1,
                loading:true,
                currentImg:'',
                currentIndex:'',
                modal_img_show:false,
                intro:''
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo',
                'loanInForm'
            ]),
            introLength(){
                if(this.intro) return this.intro.length
                return 0
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setLoanInUseForm'
            ]),

            // function

            uploadImg(fileData){
                let length = this.imgList.length || 0
                let uploadFile

                // if(this.inWechat){
                //     this.imgList.push({
                //         src:'',
                //         loading:true
                //     })
                //     uploadFile = fileData
                // }
                // else{
                    this.imgList.push({
                        src:fileData,
                        loading:true
                    })
                    uploadFile = fileData.split(',')[1]
                // }
                storageApi.uploadBase64({
                    base64:uploadFile,
                    type:'BORROW_USAGE'
                })
                .then(result=>{
                    this.imgList[length].src = result.url
                    this.imgList[length].loading = false
                })
                .catch(error => {
                    this.imgList.splice(length,1)
                })
            },
            showImg(item,index){
                if(item.loading) return
                this.modal_img_show = true
                this.currentIndex = index
                this.currentImg = this.imgList[index].src
            },
            deleteImg(){
                this.imgList.splice(this.currentIndex,1)
                this.modal_img_show = false
            },
            introSubString(){
                if(this.intro.length > 40){
                    this.intro = this.intro.substring(0,40) 
                }
            },
            getUsage(num){
                this.showLoading()
                loanInApi.usage()
                .then(result=>{
                    this.hideLoading()
                    let arr = []
                    _.each(result,(value,index)=>{
                        arr.push({
                            value:value.name,
                            display:value.name
                        })
                    })
                    this.usageList = arr
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            saveUse(){
                let isLoading = false
                _.each(this.imgList,(value,index)=>{
                    if(value.loading === true){
                        this.setMsgTip({
                            text:'请等待图片上传完成',
                            type:'warn'
                        })
                        isLoading = true
                    }
                })
                if(isLoading) return

                if(this.usage == '') {
                    this.setMsgTip({
                        text:'请选择借款用途',
                        type:'warn'
                    })
                    return
                }

                this.setLoanInUseForm({
                    usage:this.usage,
                    imgList:this.imgList,
                    intro:this.intro
                })
                history.go(-1)
            }
        },
        created(){
            this.usage = this.loanInForm.usage
            this.imgList = this.loanInForm.imgList
            this.intro = this.loanInForm.intro
            this.getUsage()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/animate";
    @import "../sass/mixins";
    .loan-in-want{
        .explain{
            @extend %font-caption;
            padding:8px 24px 0 24px;
            color:$importColor;
        }
        .intro-length{
            @extend %font-caption;
            padding:8px 16px 0 16px;
            text-align: right;
            &.shake{
                color:$red;
            }
        }
        .upload{
            padding:0 24px;
        }
        .upload__title{
            @extend %font-body1;
            line-height: 48px;
        }
        .upload__img{
            display: flex;
        }
        .upload__img-list{
            display: flex;
        }
        .upload__img-item{
            width: 48px;
            height: 48px;
            margin-right: 16px;
            // background-color: $sectionColor;
            position: relative;
            overflow:hidden;
            img{
                position: absolute;
                width: 100%;
                top:0;
                left:0;
            }
        }
        .upload__img-add{
            display: block;
            width: 48px;
            height: 48px;
            background-color: #fff;
            position: relative;
            &:before{
                content:'';
                width: 14px;
                height: 2px;
                position: absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                background-color: $defaultColor;
            }
            &:after{
                content:'';
                height: 14px;
                width: 2px;
                position: absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                background-color: $defaultColor;
            }
        }
        .save-use{
            padding:24px;
        }
        .modal-img{
            width: 100%;
            max-height:400px;
            overflow:auto;
            -webkit-overflow-scrolling: touch;
            img{
                width: 100%;
            }
        }
    }

</style>
